<template>
    <view class="comm-list-container">
        <!-- 使用封装的页面头部组件 -->
        <page-header title="我的农事"></page-header>

        <view class="search-box">
            <uni-search-bar
                placeholder="请输入要搜索的作物内容"
                v-model="searchKeyword"
                @confirm="handleSearch"
                @input="handleSearch"
                :radius="100"
                cancelButton="none" />
        </view>

        <view class="list-filter-container">
            <view class="filter-picker" @click="openDatePopup">
                <text class="picker-label">{{ selectedTime || '时间' }}</text>
                <text class="picker-arrow">
                    <roc-icon-plus
                        type="fas"
                        name="angle-down"
                        :size="16"
                        color="#2E6140"></roc-icon-plus>
                </text>
            </view>
            <picker
                mode="selector"
                :range="workTypeOptions"
                range-key="name"
                @change="onWorkTypeChange"
                style="flex: 1">
                <view class="filter-picker">
                    <text class="picker-label">{{ selectedWorkType?.name || '农事类型' }}</text>
                    <text class="picker-arrow">
                        <roc-icon-plus
                            type="fas"
                            name="angle-down"
                            :size="16"
                            color="#2E6140"></roc-icon-plus>
                    </text>
                </view>
            </picker>
        </view>

        <!-- 日期选择弹出层 -->
        <uni-popup ref="datePopup" type="center">
            <view class="popup-content">
                <view class="popup-title">选择日期范围</view>
                <view class="date-picker-container">
                    <view class="date-item">
                        <text>开始日期：</text>
                        <picker
                            mode="date"
                            :value="tempStartDate || startDate"
                            @change="onStartDateChange">
                            <view class="picker-value">
                                {{ tempStartDate || startDate || '请选择' }}
                            </view>
                        </picker>
                    </view>
                    <view class="date-item">
                        <text>结束日期：</text>
                        <picker
                            mode="date"
                            :value="tempEndDate || endDate"
                            :start="tempStartDate || startDate"
                            @change="onEndDateChange">
                            <view class="picker-value">
                                {{ tempEndDate || endDate || '请选择' }}
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="popup-buttons">
                    <button class="btn cancel" @click="cancelDatePicker">取消</button>
                    <button class="btn confirm" @click="confirmDatePicker">确定</button>
                </view>
            </view>
        </uni-popup>

        <view class="comm-record-list">
            <record-item
                v-for="(item, index) in filteredFarmingList"
                :key="index"
                @click="viewDetail(item)"
                :showActions="false">
                <template #header>
                    <view class="item-header">
                        <view style="display: flex; align-items: center">
                            <image
                                style="margin-right: 10rpx"
                                class="icon-wrapper"
                                :src="AGRICULTURAL_WORK_TYPES_CHART[item?.agriculturalWork]"
                                mode="aspectFill"></image>
                            <text class="date-title">
                                {{ getWorkTypeLabel(item.agriculturalWork) }}
                            </text>
                        </view>

                        <view class="date-text">
                            {{ formatDateEn(item.startDate) }}-{{ formatDateEn(item.endDate) }}
                        </view>
                    </view>
                </template>

                <template #content>
                    <view class="item-content">
                        <!-- 第一行都是显示地块 -->
                        <view class="info-row">
                            <text class="info-label">{{ item.plotName }}</text>
                        </view>
                        <!-- 下面的要根据类型来判断显示什么 -->
                        <!-- sowing_management: '播种',
                        disaster_weather: '灾害',
                        pest_weed_disease: '病虫草害',
                        harvest_records: '采收',
                        labor_management: '用工',
                        fertilization_management: '施肥',
                        growth_records: '作物生长',
                        irrigation_drainage: '灌溉',
                        land_preparation: '土地整备',
                        plant_protection: '植保', -->
                        <!-- 播种 -->
                        <view v-if="item.agriculturalWork === 'sowing_management'">
                            <view class="info-row">
                                <text class="info-alone">{{ item.remark }}</text>
                            </view>
                        </view>
                        <!-- 灾害 -->
                        <view v-if="item.agriculturalWork === 'disaster_weather'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">类型</text>
                                    <text class="info-value">
                                        {{ disasterTextObj[item.disasterType] }}
                                    </text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">持续</text>
                                    <text class="info-value">
                                        {{ calculateDuration(item.startDate, item.endDate) }}
                                    </text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">程度</text>
                                    <text class="info-value">
                                        {{ disasterLevelObj[item.disasterLevel] }}
                                    </text>
                                </view>
                            </view>
                        </view>
                        <!-- 病虫草害 - 还没测 -->
                        <view v-if="item.agriculturalWork === 'pest_weed_disease'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">危害类型</text>
                                    <text class="info-value">
                                        {{ item.pestTypeName }}-{{ item.pestName }}
                                    </text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">面积</text>
                                    <text class="info-value">{{ item.area }} 亩</text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">等级</text>
                                    <text class="info-value">
                                        {{ getSeverityName(item.severityLevel) }}
                                    </text>
                                </view>
                            </view>
                            <view class="info-row" v-if="item.remarks">
                                <text class="info-label">处理方案</text>
                                <text class="info-value">{{ item.remarks }}</text>
                            </view>
                        </view>
                        <!-- 采收 -->
                        <view v-if="item.agriculturalWork === 'harvest_records'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">类型</text>
                                    <text class="info-value">
                                        {{ getCropName(item.cropType, item.cropVariety) }}
                                    </text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">面积</text>
                                    <text class="info-value">{{ item.area }} 亩</text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">净重</text>
                                    <text class="info-value">{{ item.netWeight }} kg</text>
                                </view>
                            </view>
                            <view class="info-row" v-if="item.remark">
                                <text class="info-label">备注</text>
                                <text class="info-value">{{ item.remark }}</text>
                            </view>
                        </view>
                        <!-- 用工 -->
                        <view v-if="item.agriculturalWork === 'labor_management'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">负责人</text>
                                    <text class="info-value">{{ item.personInCharge }}</text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">人数</text>
                                    <text class="info-value">{{ item.workerCount }}</text>
                                </view>
                            </view>
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">用工用途</text>
                                    <text class="info-value">{{ item.notes }}</text>
                                </view>
                            </view>
                        </view>
                        <!-- 施肥 -->
                        <view v-if="item.agriculturalWork === 'fertilization_management'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">负责人</text>
                                    <text class="info-value">{{ item.personInCharge }}</text>
                                </view>
                                <view class="info-row">
                                    <text class="info-label">用量</text>
                                    <text class="info-value">{{ item.dosage }}</text>
                                </view>
                            </view>
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">备注</text>
                                    <text class="info-value">{{ item.remark }}</text>
                                </view>
                            </view>
                        </view>
                        <!-- 作物生长 -->
                        <view v-if="item.agriculturalWork === 'growth_records'">
                            <view class="space-between">
                                <view class="info-row">
                                    <text class="info-label">名称</text>
                                    <text class="info-value">{{ item.cropName }}</text>
                                </view>
                                <!-- <view class="info-row">
                                    <text class="info-label">品种</text>
                                    <text class="info-value">{{ item.remark }}</text>
                                </view> -->
                                <view class="info-row">
                                    <text class="info-label">生长阶段</text>
                                    <text class="info-value">
                                        {{ item.growthStage }}
                                    </text>
                                </view>
                            </view>
                            <view class="info-columns">
                                <view class="info-column">
                                    <text class="column-label">叶面积</text>
                                    <text class="column-value">{{ item.leafArea }} cm²</text>
                                </view>

                                <view class="info-column">
                                    <text class="column-label">株高</text>
                                    <text class="column-value">{{ item.plantHeight }} cm</text>
                                </view>

                                <view class="info-column">
                                    <text class="column-label">叶龄</text>
                                    <text class="column-value">{{ item.leafAge }}</text>
                                </view>
                            </view>
                        </view>
                        <!-- 灌溉 -->
                        <view v-if="item.agriculturalWork === 'irrigation_drainage'">
                            <view class="info-row">
                                <text class="info-alone">{{ item.remark }}</text>
                            </view>
                        </view>
                        <!-- 土地整备 -->
                        <view v-if="item.agriculturalWork === 'land_preparation'">
                            <view class="info-columns">
                                <view class="info-column">
                                    <text class="column-label">整备面积</text>
                                    <text class="column-value">{{ item.area }} 亩</text>
                                </view>
                            </view>
                        </view>
                        <!-- 植保 -->
                        <view v-if="item.agriculturalWork === 'plant_protection'">
                            <view class="info-row">
                                <text class="info-label">植保类型</text>
                                <text class="info-value">
                                    {{ getProtectionTypeText(item.protectionType) }}
                                </text>
                            </view>

                            <view class="info-row">
                                <text class="info-label">施药时间</text>
                                <text class="info-value">
                                    {{ formatDate(item.startDate) }} 至
                                    {{ formatDate(item.endDate) }}
                                </text>
                            </view>
                            <view class="info-columns">
                                <view class="info-column">
                                    <text class="column-label">植保面积</text>
                                    <text class="column-value">{{ item.area || 0 }} 亩</text>
                                </view>

                                <view class="info-column">
                                    <text class="column-label">施药方式</text>
                                    <text class="column-value">
                                        {{ getApplicationMethodText(item.applicationMethod) }}
                                    </text>
                                </view>
                                <view class="info-column">
                                    <text class="column-label">用药信息</text>
                                    <text class="column-value">{{ getMedicineInfo(item) }}</text>
                                </view>
                                <view class="info-column">
                                    <text class="column-label">用量</text>
                                    <text class="column-value">{{ getMedicineInfo2(item) }}</text>
                                </view>
                                <view class="info-column">
                                    <text class="column-label">亩均</text>
                                    <text class="column-value">{{ calculatePerMu(item) }}</text>
                                </view>
                            </view>
                        </view>

                        <!-- 只有有图片字典的都显示 -->
                        <view class="item-images" v-if="item.images">
                            <image
                                v-for="(img, imgIndex) in formatImages(item.images).slice(0, 2)"
                                :key="imgIndex"
                                :src="img"
                                mode="aspectFit"></image>
                        </view>
                        <view v-if="item.agriculturalWork === 'disaster_weather'">
                            <view class="info-row" v-if="item.remark">
                                <text class="info-red">{{ item.remark }}</text>
                            </view>
                        </view>
                    </view>
                </template>
            </record-item>

            <!-- 加载更多提示 -->
            <view class="load-more-container" v-if="filteredFarmingList.length > 0">
                <view v-if="loadingMore" class="loading-more">
                    <text class="loading-text">加载中...</text>
                </view>
                <view v-else-if="!hasMore" class="no-more">
                    <text class="no-more-text">没有更多数据了</text>
                </view>
            </view>
        </view>
        <!-- 无数据提示 -->
        <empty-data v-if="filteredFarmingList.length === 0 && !loading" />
    </view>
</template>

<script>
import PageHeader from '@/components/PageHeader/index.vue'
import RecordItem from '@/components/RecordItem/index.vue'
import EmptyData from '@/components/EmptyData/index.vue'
import { formatDateChinese, formatDateEn, formatImages } from '@/utils/util.js'
import { getMyTaskList } from '@/utils/api/myTask.js'
import { mapGetters, mapActions } from 'vuex'
import {
    TASK_STATUS,
    TASK_STATUS_CLASS,
    AGRICULTURAL_WORK_TYPES_CHART,
    AGRICULTURAL_WORK_TYPES,
    getDictText,
    STATUS_DICT,
} from '@/utils/dict.js'

export default {
    components: {
        PageHeader,
        RecordItem,
        EmptyData,
    },
    data() {
        return {
            formatDateChinese,
            formatDateEn,
            searchKeyword: '',
            farmingList: [],
            loading: false,
            loadingMore: false, // 加载更多状态
            hasMore: true, // 是否还有更多数据
            pageParams: {
                pageNo: 1,
                pageSize: 30,
            },
            TASK_STATUS,
            TASK_STATUS_CLASS,
            AGRICULTURAL_WORK_TYPES_CHART,
            // 筛选相关
            startDate: '',
            endDate: '',
            tempStartDate: '',
            tempEndDate: '',
            selectedTime: '',
            selectedWorkType: null,
            workTypeOptions: [],
            disasterTextObj: {
                0: '高温',
                1: '寒潮',
                2: '暴雨',
                3: '干旱',
                4: '大风',
            },
            disasterLevelObj: {
                2: '轻度',
                1: '中度',
                0: '重度',
            },
        }
    },
    created() {
        // 初始化农事类型选项
        this.initWorkTypeOptions()
    },
    computed: {
        ...mapGetters({
            getDictByType: 'getDictByType',
            getDictLabel: 'getDictLabel',
        }),
        filteredFarmingList() {
            return this.farmingList
        },
    },
    onShow() {
        this.fetchFarmingList()
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.fetchFarmingList()
    },
    // 触底加载更多
    onReachBottom() {
        this.loadMoreData()
    },
    methods: {
        // 初始化农事类型选项
        initWorkTypeOptions() {
            this.workTypeOptions = Object.entries(AGRICULTURAL_WORK_TYPES).map(([value, name]) => ({
                name,
                value,
            }))
        },

        getWorkTypeLabel(value) {
            if (!value) return '未指定'
            return getDictText(AGRICULTURAL_WORK_TYPES, value, value)
        },
        getStatusLabel(status) {
            if (!status) return '未开始'
            return getDictText(STATUS_DICT, status, status)
        },

        getStatusClass(status) {
            const statusMap = {
                0: 'status-pending',
                1: 'status-in-progress',
                2: 'status-completed',
            }
            return statusMap[status] || 'status-pending'
        },
        // 处理筛选变化
        handleFilterChange() {
            this.pageParams.pageNo = 1
            this.hasMore = true // 重置加载更多状态
            this.fetchFarmingList()
        },

        // 处理搜索
        handleSearch(e) {
            this.pageParams.pageNo = 1
            this.hasMore = true // 重置加载更多状态
            if (this.searchKeyword) {
                this.pageParams.keyword = e || this.searchKeyword
            } else {
                delete this.pageParams.keyword
            }
            this.fetchFarmingList()
        },

        async fetchFarmingList(isLoadMore = false) {
            try {
                if (isLoadMore) {
                    this.loadingMore = true
                } else {
                    this.loading = true
                    uni.showLoading({ title: '加载中...' })
                }

                const res = await getMyTaskList(this.pageParams)

                if (res.code === 0 && res.data) {
                    let resList = res.data.list || []
                    let allList = resList.map((item) => {
                        let associatedData = {}
                        if (item.associatedData) {
                            associatedData = JSON.parse(item.associatedData)
                        }
                        console.log('额外数据的1', item.associatedData)
                        console.log('额外数据的2', associatedData)
                        return {
                            ...item,
                            ...associatedData,
                        }
                    })

                    if (isLoadMore) {
                        // 加载更多时追加数据
                        this.farmingList = [...this.farmingList, ...allList]
                    } else {
                        // 首次加载或刷新时替换数据
                        this.farmingList = allList
                    }

                    // 判断是否还有更多数据
                    this.hasMore = resList.length >= this.pageParams.pageSize

                    console.log('最后结构')
                    console.log(this.farmingList)
                } else {
                    if (!isLoadMore) {
                        this.farmingList = this.getDefaultData()
                    }
                }
            } catch (error) {
                console.error('获取农事记录失败:', error)
                if (!isLoadMore) {
                    uni.showToast({
                        title: '获取数据失败',
                        icon: 'none',
                    })
                    this.farmingList = this.getDefaultData()
                }
            } finally {
                this.loading = false
                this.loadingMore = false
                uni.hideLoading()
                uni.stopPullDownRefresh()
            }
        },

        // 获取默认数据
        getDefaultData() {
            return [
                {
                    id: 26723,
                    agriculturalWork: '病虫害防治',
                    startDate: '2024-03-20',
                    endDate: '2024-03-21',
                    plotId: '7628',
                    fieldId: '25851',
                    area: 1200.5,
                    personInArge: '李明',
                    images: '/static/agriculture/pest-control/treatment1.jpg,/static/agriculture/pest-control/treatment2.jpg',
                    remarks: '采用生物防治方法，使用捕食性天敌防治稻飞虱',
                    createTime: '2024-03-20T09:15:22.123Z',
                    remark: '防治效果良好，未发现药害现象',
                    personInId: 31277,
                    personInCharge: '王工',
                    plotName: '1号地块',
                    fieldName: '1号条田',
                    associatedData: '防治面积覆盖率98%',
                },
            ]
        },

        viewDetail(item) {
            uni.navigateTo({
                url: `/pages/my/myFarming/detail?id=${item.id}`,
            })
        },

        formatDate(dateString) {
            return formatDateChinese(dateString)
        },

        formatImages(imagesStr) {
            return formatImages(imagesStr)
        },

        // 日期选择相关方法
        openDatePopup() {
            this.tempStartDate = this.startDate
            this.tempEndDate = this.endDate
            this.$refs.datePopup.open()
        },

        onStartDateChange(e) {
            this.tempStartDate = e.detail.value
            if (this.tempEndDate && this.tempEndDate < this.tempStartDate) {
                this.tempEndDate = ''
            }
        },

        onEndDateChange(e) {
            this.tempEndDate = e.detail.value
            if (this.tempStartDate && this.tempEndDate < this.tempStartDate) {
                uni.showToast({
                    title: '结束日期不能早于开始日期',
                    icon: 'none',
                })
                this.tempEndDate = this.tempStartDate
            }
        },

        confirmDatePicker() {
            if (this.tempStartDate && this.tempEndDate) {
                if (this.tempEndDate < this.tempStartDate) {
                    uni.showToast({
                        title: '结束日期不能早于开始日期',
                        icon: 'none',
                    })
                    return
                }
                this.startDate = this.tempStartDate
                this.endDate = this.tempEndDate
                this.selectedTime = `${this.startDate} 至 ${this.endDate}`
                this.$refs.datePopup.close()

                // 更新查询参数
                this.pageParams.startDate = this.startDate
                this.pageParams.endDate = this.endDate
                this.handleFilterChange()
            } else {
                uni.showToast({
                    title: '请选择开始和结束日期',
                    icon: 'none',
                })
            }
        },

        cancelDatePicker() {
            this.tempStartDate = this.startDate
            this.tempEndDate = this.endDate
            this.$refs.datePopup.close()
        },

        onWorkTypeChange(e) {
            const index = e.detail.value
            this.selectedWorkType = this.workTypeOptions[index]
            this.pageParams.agriculturalWork = this.selectedWorkType.value
            this.handleFilterChange()
        },
        // 计算持续时间
        calculateDuration(startDate, endDate) {
            if (!startDate || !endDate) return '未知'

            const start = new Date(startDate)
            const end = new Date(endDate)

            // 计算天数差异
            const diffTime = Math.abs(end - start)
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

            if (diffDays === 0) {
                return '1天'
            }

            return `${diffDays}天`
        },
        // 获取危害程度名称
        getSeverityName(severity) {
            const severities = {
                2: '轻度',
                1: '中度',
                0: '严重',
            }
            return severities[severity] || '未知'
        },
        // 获取作物名称和品种的显示文本
        getCropName(cropType, cropVariety) {
            if (!cropType) return '未指定'

            const cropLabel = this.getDictLabel('crop_name_type', cropType) || cropType
            let varietyLabel = cropVariety || ''

            // 如果有作物类型，尝试从对应的品种字典中获取品种名称
            if (cropType && cropVariety) {
                varietyLabel = this.getDictLabel(cropType, cropVariety) || cropVariety
            }

            if (cropLabel && varietyLabel) {
                return `${cropLabel}-${varietyLabel}`
            } else if (cropLabel) {
                return cropLabel
            } else if (varietyLabel) {
                return varietyLabel
            }

            return '未指定'
        },
        // 获取生长阶段文本
        getGrowthStageText(growthStage) {
            if (!growthStage) return '未知'

            // 尝试从字典获取
            const dictLabel = this.getDictLabel('generation_phase', growthStage)
            if (dictLabel) return dictLabel

            // 如果字典中没有，返回原值
            return growthStage || '未知阶段'
        },
        // 获取植保类型文本
        getProtectionTypeText(type) {
            if (!type) return '未知'

            // 尝试从字典获取
            const dictLabel = this.getDictLabel('pests_diseases_weeds_type', type)
            if (dictLabel) return dictLabel

            // 如果字典中没有，使用默认映射
            return this.protectionTypeDict[type] || type || '未知类型'
        },
        // 获取施药方式文本
        getApplicationMethodText(method) {
            if (!method) return '未知'

            // 尝试从字典获取
            const dictLabel = this.getDictLabel('pesticide_application_type', method)
            if (dictLabel) return dictLabel

            // 如果字典中没有，使用默认映射
            return this.applicationMethodDict[method] || method || '未知方式'
        },
        // 获取获取用药信息文本
        getMedicineText(method) {
            console.log('获取获取用药信息文本')
            console.log(method)
            if (!method) return '未知'

            // 尝试从字典获取
            const dictLabel = this.getDictLabel('drug_type', method)
            console.log(dictLabel)
            if (dictLabel) return dictLabel

            return ''
        },
        // 获取用药信息
        getMedicineInfo(item) {
            if (item.listSubtable && item.listSubtable.length > 0) {
                const medicine = item.listSubtable[0]
                if (medicine.pesticideId && medicine.dosage) {
                    return `${this.getMedicineText(medicine.pesticideId)}`
                }
            }
            return '无用药信息'
        },
        // 获取用药信息  -用量
        getMedicineInfo2(item) {
            if (item.listSubtable && item.listSubtable.length > 0) {
                const medicine = item.listSubtable[0]
                if (medicine.pesticideId && medicine.dosage) {
                    return `${medicine.dosage}${medicine.dosageUnit || 'Kg'}`
                }
            }
            return '无用药信息'
        },
        // 计算亩均用量
        calculatePerMu(item) {
            if (item.listSubtable && item.listSubtable.length > 0 && item.area) {
                const medicine = item.listSubtable[0]
                if (medicine.pesticideId && medicine.dosage) {
                    const perMu = (medicine.dosage / item.area).toFixed(2)
                    return `${perMu}${medicine.dosageUnit || 'Kg'}`
                }
            }
            return '-'
        },

        // 加载更多数据
        async loadMoreData() {
            if (this.loadingMore || !this.hasMore) {
                return
            }

            this.pageParams.pageNo += 1
            await this.fetchFarmingList(true)
        },
    },
}
</script>

<style lang="scss">
.status-tag {
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 24rpx;

    &.pending {
        background-color: #fff7e6;
        color: #ffa940;
    }

    &.partial {
        background-color: #e6f7ff;
        color: #1890ff;
    }

    &.completed {
        background-color: #f6ffed;
        color: #52c41a;
    }
}

.list-filter-container {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.filter-picker {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 5px;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
}

.picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.picker-arrow {
    margin-left: 8px;
    font-size: 13px;
    color: #999;
}

.popup-content {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

.popup-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.date-picker-container {
    margin-bottom: 20px;
}

.date-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.picker-value {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    width: 300rpx;
}

.popup-buttons {
    display: flex;
    justify-content: space-between;
}

.btn {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
}

.cancel {
    background-color: #f5f5f5;
    color: #333;
}

.confirm {
    background-color: #2e6140;
    color: #fff;
}
</style>
